<template>
  <div>
    <accountList></accountList>
    <br><br><br><br>
    <div class="list">
      <h3>请输入账户地址</h3>
      <el-input style="width: 800px" placeholder="请输入账户地址" v-model="accoutAddr">
        <template slot="prepend">账户地址：</template>
      </el-input>
      <el-button type="primary" @click="getTransRecordByAddress">查询交易记录</el-button><br><br><br>
    </div>
    <div>
    <el-table
      :data="transRecord"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="id"
        width="380">
      </el-table-column>
      <el-table-column
        prop="hash"
        label="交易哈希"
        width="380">
      </el-table-column>
      <el-table-column
        prop="blockNumber"
        label="blockNumber">
      </el-table-column>
      <el-table-column
        prop="fromAddr"
        label="转出地址">
      </el-table-column>
      <el-table-column
        prop="toAddr"
        label="转入地址">
      </el-table-column>
      <el-table-column
        prop="transValue"
        label="转账金额">
      </el-table-column>
    </el-table>
    </div>
  </div>


</template>

<script>
import accountList from "../components/accountList";

export default {
  name: "page3",
  components: {accountList},
  data() {
    return {
      accoutAddr: '',
      transRecord: '',
    }
  },
  methods: {
    //点击更新按钮请求账户列表
    getTransRecordByAddress() {
      //发送请求
      this.axios.post("/getTransRecordByAddress",{
        accoutAddr: this.accoutAddr,
      }).then(res => {
        this.transRecord=res.data;
      })
    }
  }
}
</script>

<style scoped>
.list{padding:0;
  margin:0;
  text-align: left;
  list-style-type: none;}


</style>

